<template lang="">
  <div>
    <div>贝塞尔曲线</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script setup lang="ts">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  onMounted(() => {
    init();
  });

  function init() {
    scene = new THREE.Scene();
    const width = 500;
    const height = 300;
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    render.setClearColor(0x00000f);
    // console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    // p1、p2、p3表示三个点坐标
    // p1、p3是曲线起始点，p2是曲线的控制点
    const p1 = new THREE.Vector2(-80, 0);
    const p2 = new THREE.Vector2(20, 100);
    const p3 = new THREE.Vector2(80, 0);
    // 二维二次贝赛尔曲线
    const curve = new THREE.QuadraticBezierCurve(p1, p2, p3);
    const curvearr = curve.getPoints(50);
    const geometry = new THREE.BufferGeometry().setFromPoints(curvearr);
    const material = new THREE.LineBasicMaterial({ color: 0x00fffff });
    const line = new THREE.Line(geometry, material);
    scene.add(line);

    const geometry1 = new THREE.BufferGeometry().setFromPoints([p1, p2, p3]);
    const material1 = new THREE.PointsMaterial({
      color: 0xff00ff,
      size: 10,
    });
    const points2 = new THREE.Points(geometry1, material1);
    scene.add(points2);
    // 三个点构成的线条
    const line1 = new THREE.Line(geometry1, new THREE.LineBasicMaterial());
    scene.add(line1);

    // 三维二次贝赛尔曲线QuadraticBezierCurve3
    const v1 = new THREE.Vector3(-80, 0, 0);
    const v2 = new THREE.Vector3(20, 100, 0);
    const v3 = new THREE.Vector3(80, 0, 100);
    // 三维二次贝赛尔曲线
    const curve2 = new THREE.QuadraticBezierCurve3(v1, v2, v3);
    const curvearr2 = curve2.getPoints(50);
    const geometry2 = new THREE.BufferGeometry().setFromPoints(curvearr2);
    const material2 = new THREE.LineBasicMaterial({
      color: 0xff3232,
    });

    const line2 = new THREE.Line(geometry2, material2);
    scene.add(line2);

    const geometry3 = new THREE.BufferGeometry(); //创建一个几何体对象
    // 三维样条曲线
    const curve3 = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-50, 20, 90),
      new THREE.Vector3(-10, 40, 40),
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(60, -60, 0),
      new THREE.Vector3(70, 0, 80),
    ]);
    const pointsArr3 = curve3.getSpacedPoints(100); //曲线取点
    geometry3.setFromPoints(pointsArr3); //pointsArr赋值给顶点位置属性

    const pos = geometry3.attributes.position;
    const count3 = pos.count; //顶点数量
    // 计算每个顶点的颜色值
    const colorsArr3: any = [];
    for (let i = 0; i < count3; i++) {
      const percent3: number = i / count3; //点索引值相对所有点数量的百分比
      //根据顶点位置顺序大小设置颜色渐变
      // 红色分量从0到1变化，蓝色分量从1到0变化
      colorsArr3.push(percent3, 0, 1 - percent3); //蓝色到红色渐变色
    }
    //类型数组创建顶点颜色color数据
    console.log('aa', colorsArr3);

    const colors3 = new Float32Array(colorsArr3);

    // 设置几何体attributes属性的颜色color属性
    geometry3.attributes.color = new THREE.BufferAttribute(colors3, 3);
    const material3 = new THREE.LineBasicMaterial({
      vertexColors: true, //使用顶点颜色渲染
    });
    const line3 = new THREE.Line(geometry3, material3);
    scene.add(line3);

    renderFun();
  }
  function renderFun() {
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
